{$layout}
{$template "menu"}
{$template "detail_menu"}

<!-- 拖动排序 -->
{$var "header"}
<script type="text/javascript" src="/js/sortable.min.js"></script>
{$end}

<h3>分组<a :href="'/proxy/waf/group/update?wafId=' + config.id + '&groupId=' + group.id">修改</a></h3>
<table class="ui table selectable definition">
	<tr>
		<td class="title">名称</td>
		<td>{{group.name}}</td>
	</tr>
	<tr>
		<td>ID</td>
		<td>{{group.id}}</td>
	</tr>
	<tr>
		<td>描述</td>
		<td>
			<span v-if="group.description.length == 0" class="disabled">暂时还没有描述。</span>
			<span v-if="group.description.length > 0">{{group.description}}</span>
		</td>
	</tr>
	<tr>
		<td>启用状态</td>
		<td>
			<span v-if="group.on" class="ui label tiny green">启用</span>
			<span v-if="!group.on" class="ui label tiny">停用</span>
		</td>
	</tr>
</table>

<h3 style="padding-top:0.8em">规则集<a :href="'/proxy/waf/group/rule/add?wafId=' + config.id + '&groupId=' + group.id">添加规则集</a> </h3>
<p class="comment" v-if="sets.length == 0">暂时还没有规则。</p>
<table class="ui table selectable" id="sets-table" v-if="sets.length > 0">
	<thead>
		<tr>
			<th style="width:3em"></th>
			<th nowrap="">规则集名称</th>
			<th nowrap="">规则</th>
			<th nowrap="">关系</th>
			<th nowrap="">动作</th>
			<th class="three op">操作</th>
		</tr>
	</thead>
	<tbody v-for="set in sets">
		<tr>
			<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
			<td><span :class="{disabled:!set.on}">{{set.name}}</span>
				<p>
					<span v-if="set.on" class="ui label tiny green" style="padding:4px;font-size:0.6em">启用</span>
					<span v-if="!set.on" class="ui label tiny red" style="padding:4px;font-size:0.6em">停用</span>
				</p>
			</td>
			<td class="rules-box">
				<div v-for="rule in set.rules" style="margin-top: 0.4em;margin-bottom:0.4em">
					<span class="ui label tiny">{{rule.name}}[{{rule.param}}] <var :class="{dash:rule.isCaseInsensitive}" :title="rule.isCaseInsensitive ? '大小写不敏感':''">{{rule.operator}}</var> {{rule.value}}</span>
				</div>
				<span class="ui disabled" v-if="set.rules.length == 0">暂时还没有规则</span>
			</td>
			<td>{{set.connector}}</td>
			<td><span :class="{red:set.action == 'BLOCK' || set.action == 'CAPTCHA', green:set.action != 'BLOCK' && set.action != 'CAPTCHA'}">{{set.actionName}}[{{set.action}}]</span>
				<div v-if="set.actionLinks.length > 0" style="margin-top:0.3em">
					<span class="disabled">-&gt;</span> <span v-for="link in set.actionLinks"><a :href="link.url"><span class="disabled">[{{link.name}}]</span></a> &nbsp;</span>
				</div>
			</td>
			<td>
				<a :href="'/proxy/waf/group/rule/update?wafId=' + config.id + '&groupId=' + group.id + '&setId=' + set.id">修改</a> &nbsp; <a href="" @click.prevent="disableRule(set.id)" v-if="set.on">停用</a><a href="" @click.prevent="enableRule(set.id)" v-if="!set.on">启用</a> &nbsp; <a href="" @click.prevent="deleteRule(set.id)">删除</a>
			</td>
		</tr>
	</tbody>
</table>

<p class="comment" v-if="sets.length > 1">所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。</p>